<template>
  <div class="login-panel">
    <!-- 顶部标题 -->
    <h1 class="title"> 后台管理系统</h1>
    <!-- 中间tab切换 -->

    <div class="tabs">
      <el-tabs type="border-card" stretch v-model="activeName">
        <!-- 账号登录pane -->
        <el-tab-pane label="帐号登陆" name="account">
          <!-- 插槽  -->
          <template #label>
            <div class="label">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span class="text">帐号登录</span>
            </div>
          </template>
          <accountPanel ref="accountRef" />
        </el-tab-pane>
        <!-- 手机登录pane -->
        <el-tab-pane label="手机登录" name="phone">
          <!-- 插槽 -->
          <template #label>
            <div class="label">
              <el-icon>
                <Iphone />
              </el-icon>
              <span class="text">手机登录</span>
            </div>
          </template>
          <phonePanel />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 底部区域 -->
    <div class="controls">
      <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
      <el-link href="#" type="primary">忘记密码</el-link>
    </div>
    <el-button class="login-btn" type="primary" size="large" @click="handleLoginAction">立即登录</el-button>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue';
import { ref } from 'vue'
import phonePanel from './phone-panel.vue';
import accountPanel from './account-panel.vue';
const isRemPwd = ref(false)
const activeName = ref("account")
const accountRef = ref<InstanceType<typeof accountPanel>>()
function handleLoginAction() {
  if (activeName.value == 'account') {
    //获取子组件实例
    accountRef.value?.loginAction()
    //调用方法
  } else {
    console.log('用户手机登录')
  }
}

</script>

<style lang="less" scoped>
.login-panel {
  width: 330px;
  margin-bottom: 150px;

  .title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
  }

  .label {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text {
    margin-left: 10px;

  }

  .controls {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
  }

  .login-btn {
    margin-top: 10px;
    width: 100%;
    --el-button-size: 50px; //设置按钮大小覆盖
  }
}

.el-link {
  margin-right: 8px;
}
</style>
